<template>
  <!-- 待收货页 -->
  <ul class="box">
    <div class="top">
      <span class="iconfont icon-chevron-thin-left" @click="getlog()"></span>
      <p>
        {{
          num1 === 0
            ? "待付款"
            : num1 === 1
            ? "待发货"
            : num1 === 2
            ? "待收货"
            : num1 === 3
            ? "已完成"
            : "全部订单"
        }}
      </p>
    </div>
    <li v-for="(item, index) in listdata" :key="index">
      <img :src="item.goods_url" alt="" />
      <div class="btn">
        <span class="tit">{{ item.title }}</span>
        <p class="vjghd">￥{{ item.price }}</p>
        <div class="desi">
          <span>黑色; </span><span>均码</span
          ><span style="float: right">x1</span>
        </div>
        <div class="sales">
          <span style="width: 6rem; float: left">7天无理由退货</span>
          <span style="margin-left: 1rem; float: left; width: 4rem"
            >7天可换</span
          >
        </div>
        <div class="out">
          <span style="width: 6rem; float: left">共1件商品</span
          ><span style="float: right; width: 8rem">实付￥{{ item.price }}</span>
        </div>
        <p class="phys" @click="ments(item)">
          {{ num1 === 0 ? "付款" : num1 === 3 ? "申请售后" : "查看物流" }}
        </p>
      </div>
    </li>
    <!-- <div class="tan" v-if="flag">
      你确定要付款吗
    </div> -->
  </ul>
</template>
<script>
import * as API from "@/components/api/hanjinqi.js";
export default {
  data() {
    return {
      listdata: [
        // {
        //   img: "https://img13.360buyimg.com/jdcms/s150x150_jfs/t1/189289/21/9483/177069/60cff610E9671c786/1542c9d42194efe5.jpg.webp",
        //   title: "男士真牛皮腰带不贵",
        //   price: "201.00",
        // },
        // {
        //   img: "https://img13.360buyimg.com/seckillcms/s144x144_jfs/t1/123375/7/15339/151389/5f8a9ba1Ebdf53990/aa6d38b451d2ebf8.jpg!q70.jpg.webp",
        //   title: "火腿切片",
        //   price: "9.90",
        // },
        // {
        //   img: "https://img20.360buyimg.com/jdcms/s150x150_jfs/t1/86116/9/19419/214186/614be553Ebd7fed60/8f344f12ed2f4b0b.jpg.webp",
        //   title: "苹果13 红色",
        //   price: "5999.00",
        // },
        // {
        //   img: "https://img10.360buyimg.com/n7/jfs/t1/190923/13/12095/133092/60e2d96cE36716b61/91be3fef705049cf.jpg",
        //   title: "宝马原装方向盘",
        //   price: "179.00",
        // },
      ],
      flag: true,
    };
  },
  methods: {
    // 点击返回上一页
    getlog() {
      this.$router.push({ path: "/my" });
    },
    // 点击付款
    ments(item) {
      // console.log('您点击了付款')
      this.$dialog
        .confirm({
          // title: "标题",
          message: "您确定要删除吗",
        })
        .then(async () => {
          // on confirm
          let res = await API.shopdata({
            uid: JSON.parse(localStorage.getItem("token")).uid,
            index: this.num1,
            goods_id: item.goods_id,
          });
          // if (this.num1 !== 5) {
          //   this.listdata = res.num1data;
          // } else {
           
            
          // }
           this.listdata = res.data;
          
          
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  async created() {
    // console.log(this.$store.state.hanjinqi.arr)
    let res = await API.shopdata({
      uid: JSON.parse(localStorage.getItem("token")).uid,
      index: this.num1,
    });
    console.log(res.data);
    if (this.num1 !== 5) {
      this.listdata = res.num1data;
    } else {
      this.listdata = res.data;
    }
  },
  computed: {
    num1() {
      return this.$store.state.hanjinqi.arr;
    },
  },
};
</script>

<style scoped>
.tan {
  position: fixed;
  left: 25%;
  top: 15%;
  width: 10rem;
  height: 10rem;

  background: #f5f5f5;
}
.box {
  width: 100%;
  height: 100vh;
  z-index: 6;
  position: fixed;
  left: 0;
  top: 0;
  background: #fbfbfb;
  overflow-y: auto;
  padding-top: 3rem;
}
.box .top {
  width: 100%;
  height: 3rem;
  position: fixed;
  left: 0;
  top: 0;
  background: #f5f5f5;
}
.top span {
  width: 10%;
  float: left;
  line-height: 3rem;
  margin-left: 0.3rem;
}
.top p {
  margin-left: 45%;
  line-height: 3rem;
}
.box li {
  width: 95%;
  height: 11rem;
  margin: 1rem 2.5% 1rem 2.5%;
  border-bottom: 1px solid #efefef;
}
.box li img {
  width: 25%;
  height: 6rem;
  float: left;
}
.box li .btn {
  float: left;
  width: 70%;
  height: 100%;
  /* background: red; */
  margin-left: 5%;
}
.btn .tit {
  width: 70%;
  float: left;
}
.btn .vjghd {
  float: left;
  width: 30%;
}
.btn .desi {
  width: 100%;
  float: left;
  margin-top: 0.5rem;
}
.btn .sales {
  width: 100%;
  height: 1rem;
  float: left;
  margin-top: 1rem;
}
.sales span {
  background: #edf3ff;
  font-size: 0.5rem;
  text-align: center;
}
.out {
  width: 100%;
  margin-top: 1.5rem;
  float: left;
}
.btn .phys {
  width: 5rem;
  height: 1.5rem;
  border: 1px solid #5b5c5f;
  float: right;
  line-height: 1.5rem;
  text-align: center;
  border-radius: 2rem;
  margin-top: 1rem;
}
</style>